<template>
  <div class="site-footer">
    <div class="service">
      <div class="container">
        <ul>
          <li>
            <span class="icon-setting"></span>预约维修服务
          </li>
          <li>
            <span class="icon-7day"></span>7天无理由退货
          </li>
          <li>
            <span class="icon-15day"></span>15天免费换货
          </li>
          <li>
            <span class="icon-post"></span>满150元包邮
          </li>
        </ul>
      </div>
    </div>
    <!-- ------------- -->
    <div class="container">
      <div class="footer-links">
        <dl class="footer-links-dl">
          <dt>帮助中心</dt>
          <dd>账户管理</dd>
          <dd>购物指南</dd>
          <dd>订单操作</dd>
        </dl>
        <dl class="footer-links-dl">
          <dt>服务支持</dt>
          <dd>售后政策</dd>
          <dd>自助服务</dd>
          <dd>相关下载</dd>
        </dl>
        <dl class="footer-links-dl">
          <dt>线下门店</dt>
          <dd>小米之家</dd>
          <dd>服务网点</dd>
          <dd>授权体验店</dd>
        </dl>
        <dl class="footer-links-dl">
          <dt>关于小米</dt>
          <dd>了解小米</dd>
          <dd>加入小米</dd>
          <dd>投资者关系</dd>
          <dd>廉洁举报</dd>
        </dl>
        <dl class="footer-links-dl">
          <dt>关注我们</dt>
          <dd>新浪微博</dd>
          <dd>官方微信</dd>
          <dd>联系我们</dd>
          <dd>公益基金会</dd>
        </dl>
        <dl class="footer-links-dl">
          <dt>特色服务</dt>
          <dd>F 码通道</dd>
          <dd>礼物码</dd>
          <dd>防伪查询</dd>
        </dl>
      </div>
      <div class="footer-contact">
        <div class="phone">400-100-5678</div>
        <p>8:00-18:00（仅收市话费）</p>
        <a href="javascript:;" class="follow">人工客服</a>
      </div>
    </div>
    <!-- ------------- -->
    <div class="site-info">
      <div class="container">
        <a href="javascript:;" class="logo-footer"></a>
        <div class="info-text">
          <!-- <p>
            <a href="javascript:;">小米商城</a>
            <a href="javascript:;">MIUI</a>
            <a href="javascript:;">米家</a>
            <a href="javascript:;">米聊</a>
            <a href="javascript:;">多看</a>
            <a href="javascript:;">游戏</a>
            <a href="javascript:;">政策服务</a>
            <a href="javascript:;">小米天猫店</a>
            <a href="javascript:;">小米集团隐私政策</a>
            <a href="javascript:;">小米公司儿童信息保护规则</a>
            <a href="javascript:;">小米商城隐私政策</a>
            <a href="javascript:;">小米商城用户协议</a>
            <a href="javascript:;">问题反馈</a>
            <a href="javascript:;">Selete Location</a>
          </p>-->
          <p class="sites">
            <a
              rel="nofollow"
              href="//www.mi.com/index.html"
              target="_blank"
              data-stat-id="4bc9b84ee8285a77"
              onclick="_msq.push(['trackEvent', '81190ccc4d52f577-4bc9b84ee8285a77', '//www.mi.com/index.html', 'pcpid', '']);"
            >小米商城</a>
            <span class="sep">|</span>
            <a
              rel="nofollow"
              href="//www.miui.com/"
              target="_blank"
              data-stat-id="b60c8d49632019b1"
              onclick="_msq.push(['trackEvent', '81190ccc4d52f577-b60c8d49632019b1', '//www.miui.com/', 'pcpid', '']);"
            >MIUI</a>
            <span class="sep">|</span>
            <a
              rel="nofollow"
              href="//home.mi.com/index.html"
              target="_blank"
              data-stat-id="85caa644e7f8972d"
              onclick="_msq.push(['trackEvent', '81190ccc4d52f577-85caa644e7f8972d', '//home.mi.com/index.html', 'pcpid', '']);"
            >米家</a>
            <span class="sep">|</span>
            <a
              rel="nofollow"
              href="http://www.miliao.com/"
              target="_blank"
              data-stat-id="8fa92518f4f4139b"
              onclick="_msq.push(['trackEvent', '81190ccc4d52f577-8fa92518f4f4139b', 'http://www.miliao.com/', 'pcpid', '']);"
            >米聊</a>
            <span class="sep">|</span>
            <a
              rel="nofollow"
              href="//www.duokan.com/"
              target="_blank"
              data-stat-id="ae6dcc48f3fec411"
              onclick="_msq.push(['trackEvent', '81190ccc4d52f577-ae6dcc48f3fec411', '//www.duokan.com/', 'pcpid', '']);"
            >多看</a>
            <span class="sep">|</span>
            <a
              rel="nofollow"
              href="//game.xiaomi.com/"
              target="_blank"
              data-stat-id="cfa96d3f1c80eace"
              onclick="_msq.push(['trackEvent', '81190ccc4d52f577-cfa96d3f1c80eace', '//game.xiaomi.com/', 'pcpid', '']);"
            >游戏</a>
            <span class="sep">|</span>
            <a
              rel="nofollow"
              href="//b.mi.com/?client_id=180100031058&amp;masid=17409.0358"
              target="_blank"
              data-stat-id="0e12a444fc5e6d8d"
              onclick="_msq.push(['trackEvent', '81190ccc4d52f577-0e12a444fc5e6d8d', '//b.mi.com/client_id=180100031058&amp;masid=17409.0358', 'pcpid', '']);"
            >政企服务</a>
            <span class="sep">|</span>
            <a
              rel="nofollow"
              href="//xiaomi.tmall.com/"
              target="_blank"
              data-stat-id="1ba81e1d3257c345"
              onclick="_msq.push(['trackEvent', '81190ccc4d52f577-1ba81e1d3257c345', '//xiaomi.tmall.com/', 'pcpid', '']);"
            >小米天猫店</a>
            <span class="sep">|</span>
            <a
              rel="nofollow"
              href="//privacy.mi.com/all/zh_CN/"
              target="_blank"
              data-stat-id="158576437b9b96c3"
              onclick="_msq.push(['trackEvent', '81190ccc4d52f577-158576437b9b96c3', '//privacy.mi.com/all/zh_CN/', 'pcpid', '']);"
            >小米集团隐私政策</a>
            <span class="sep">|</span>
            <a
              rel="nofollow"
              href="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/f516fe9e2c01.html"
              target="_blank"
              data-stat-id="eec7379eb3f98230"
              onclick="_msq.push(['trackEvent', '81190ccc4d52f577-eec7379eb3f98230', '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/f516fe9e2c01.html', 'pcpid', '']);"
            >小米公司儿童信息保护规则</a>
            <span class="sep">|</span>
            <a
              rel="nofollow"
              href="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/ded8d0e4a77d.html"
              target="_blank"
              data-stat-id="3f159cf3a67c59a4"
              onclick="_msq.push(['trackEvent', '81190ccc4d52f577-3f159cf3a67c59a4', '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/ded8d0e4a77d.html', 'pcpid', '']);"
            >小米商城隐私政策</a>
            <span class="sep">|</span>
            <a
              rel="nofollow"
              href="//www.mi.com/about/user-agreement/"
              target="_blank"
              data-stat-id="41adfd81b7d2e91e"
              onclick="_msq.push(['trackEvent', '81190ccc4d52f577-41adfd81b7d2e91e', '//www.mi.com/about/user-agreement/', 'pcpid', '']);"
            >小米商城用户协议</a>
            <span class="sep">|</span>
            <a
              rel="nofollow"
              href="//static.mi.com/feedback/"
              target="_blank"
              data-stat-id="f0c36f7995bd26c1"
              onclick="_msq.push(['trackEvent', '81190ccc4d52f577-f0c36f7995bd26c1', '//static.mi.com/feedback/', 'pcpid', '']);"
            >问题反馈</a>
            <span class="sep">|</span>
            <a
              rel="nofollow"
              href="javascript:void(0);"
              class="J_siteGlobalRegion"
              data-stat-id="0198961fb39e8aa3"
              onclick="_msq.push(['trackEvent', '81190ccc4d52f577-0198961fb39e8aa3', 'javascript:void0', 'pcpid', '']);"
            >Select Location</a>
          </p>
          <p>
            ©
            <a
              href="javascript:;"
              target="_blank"
              title="mi.com"
              data-stat-id="1d331d12c0e00f7b"
              onclick="_msq.push(['trackEvent', '81190ccc4d52f577-1d331d12c0e00f7b', 'javascript:', 'pcpid', '']);"
            >mi.com</a> 京ICP证110507号
            <a
              href="http://beian.miit.gov.cn/"
              target="_blank"
              rel="nofollow"
              data-stat-id="09f3ca7af7fc3710"
              onclick="_msq.push(['trackEvent', '81190ccc4d52f577-09f3ca7af7fc3710', 'http://beian.miit.gov.cn/', 'pcpid', '']);"
            >京ICP备10046444号</a>
            <a
              rel="nofollow"
              href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802020134"
              target="_blank"
              data-stat-id="e9d2688beb41458a"
              onclick="_msq.push(['trackEvent', '81190ccc4d52f577-e9d2688beb41458a', 'http://www.beian.gov.cn/portal/registerSystemInforecordcode=11010802020134', 'pcpid', '']);"
            >京公网安备11010802020134号</a>
            <a
              href="//www.mi.com/culture-license/"
              target="_blank"
              data-stat-id="a41c096d4f08510f"
              onclick="_msq.push(['trackEvent', '81190ccc4d52f577-a41c096d4f08510f', '//www.mi.com/culture-license/', 'pcpid', '']);"
            >京网文[2020]0276-042号</a>
            <br />
            <a
              href="//www.mi.com/medical/record/"
              target="_blank"
              data-stat-id="97cdd5ee52424ea3"
              onclick="_msq.push(['trackEvent', '81190ccc4d52f577-97cdd5ee52424ea3', '//www.mi.com/medical/record/', 'pcpid', '']);"
            >（京）网械平台备字（2018）第00005号</a>
            <a
              href="//www.mi.com/medical/qualification/"
              target="_blank"
              data-stat-id="f4696bf96a52cdae"
              onclick="_msq.push(['trackEvent', '81190ccc4d52f577-f4696bf96a52cdae', '//www.mi.com/medical/qualification/', 'pcpid', '']);"
            >互联网药品信息服务资格证 (京)-非经营性-2014-0090</a>
            <a
              href="//www.mi.com/business-license/"
              target="_blank"
              data-stat-id="3ed1ade2d90f5e8a"
              onclick="_msq.push(['trackEvent', '81190ccc4d52f577-3ed1ade2d90f5e8a', '//www.mi.com/business-license/', 'pcpid', '']);"
            >营业执照</a>
            <a
              href="//www.mi.com/medical/list/"
              target="_blank"
              data-stat-id="eadf6a7897048584"
              onclick="_msq.push(['trackEvent', '81190ccc4d52f577-eadf6a7897048584', '//www.mi.com/medical/list/', 'pcpid', '']);"
            >医疗器械质量公告</a>
            <br />
            <a
              href="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/af5b8ef38e7d57c5ee7fa4289ccf4df8.png"
              target="_blank"
              data-stat-id="22eb6b5cf4b462d7"
              onclick="_msq.push(['trackEvent', '81190ccc4d52f577-22eb6b5cf4b462d7', '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/af5b8ef38e7d57c5ee7fa4289ccf4df8.png', 'pcpid', '']);"
            >增值电信业务许可证</a>&nbsp;网络食品经营备案（京）【2018】WLSPJYBAHF-12&nbsp;
            <a
              href="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/fe7383e11127caea371f17156f429a1e.png"
              target="_blank"
              data-stat-id="911257f4cef77495"
              onclick="_msq.push(['trackEvent', '81190ccc4d52f577-911257f4cef77495', '//cdn.cnbj1.fds.api.mi-img.com/mi-mall/fe7383e11127caea371f17156f429a1e.png', 'pcpid', '']);"
            >食品经营许可证</a>
            <br />违法和不良信息举报电话：185-0130-1238&nbsp;
            <a
              href="//www.mi.com/static/intellectual/index.html"
              target="_blank"
              data-stat-id="b58165270fe32b05"
              onclick="_msq.push(['trackEvent', '81190ccc4d52f577-b58165270fe32b05', '//www.mi.com/static/intellectual/index.html', 'pcpid', '']);"
            >知识产权侵权投诉</a>&nbsp;本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
          </p>
          <!-- ------------------- -->
          <div class="info-links">
            <a
              rel="nofollow"
              href="//privacy.truste.com/privacy-seal/validation?rid=4fc28a8c-6822-4980-9c4b-9fdc69b94eb8&amp;lang=zh-cn"
              target="_blank"
              data-stat-id="d79bd36766f023f0"
              onclick="_msq.push(['trackEvent', '81190ccc4d52f577-d79bd36766f023f0', '//privacy.truste.com/privacy-seal/validationrid=4fc28a8c-6822-4980-9c4b-9fdc69b94eb8&amp;lang=zh-cn', 'pcpid', '']);"
            >
              <img
                rel="nofollow"
                src="//i1.mifile.cn/f/i/17/site/truste.png"
                alt="TRUSTe Privacy Certification"
              />
            </a>
            <a
              rel="nofollow"
              href="//search.szfw.org/cert/l/CX20120926001783002010"
              target="_blank"
              data-stat-id="f0877449bc91038d"
              onclick="_msq.push(['trackEvent', '81190ccc4d52f577-f0877449bc91038d', '//search.szfw.org/cert/l/CX20120926001783002010', 'pcpid', '']);"
            >
              <img rel="nofollow" src="//s01.mifile.cn/i/v-logo-2.png" alt="诚信网站" />
            </a>
            <a
              rel="nofollow"
              href="//ss.knet.cn/verifyseal.dll?sn=e12033011010015771301369&amp;ct=df&amp;pa=461082"
              target="_blank"
              data-stat-id="3530cb27944a7440"
              onclick="_msq.push(['trackEvent', '81190ccc4d52f577-3530cb27944a7440', '//ss.knet.cn/verifyseal.dllsn=e12033011010015771301369&amp;ct=df&amp;pa=461082', 'pcpid', '']);"
            >
              <img rel="nofollow" src="//s01.mifile.cn/i/v-logo-1.png" alt="可信网站" />
            </a>
            <a
              rel="nofollow"
              href="//www.mi.com/service/buy/commitment/"
              target="_blank"
              data-stat-id="a92ee23ca9c6d727"
              onclick="_msq.push(['trackEvent', '81190ccc4d52f577-a92ee23ca9c6d727', '//www.mi.com/service/buy/commitment/', 'pcpid', '']);"
            >
              <img
                rel="nofollow"
                src="//i8.mifile.cn/b2c-mimall-media/ba10428a4f9495ac310fd0b5e0cf8370.png"
                alt="诚信经营 放心消费"
              />
            </a>
          </div>
        </div>
        <div class="slogan">探索黑科技，小米为发烧而生</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "nav-footer"
};
</script>

<style lang='scss'>
@import "./../assets/scss/config.scss";
@import "./../assets/scss/mixin.scss";

.service {
  color: $colorC;
  font-size: 16px;
  height: 80px;
  .container {
    ul {
      width: 1226px;
      height: 80px;
      color: #666666;
      font-size: 16px;
      font-size: 16px;
      line-height: 80px;
      border-bottom: 1px solid #e0e0e0;
      li {
        display: inline-block;
        width: 24.9%;
        text-align: center;
        border-right: 1px solid #e5e5e5;
        span {
          display: inline-block;
          width: 20px;
          height: 20px;
          vertical-align: middle;
          margin-right: 8px;
        }
        .icon-setting {
          @include bgImg(20px, 20px, "/imgs/icon-setting.png");
        }
        .icon-7day {
          @include bgImg(20px, 20px, "/imgs/icon-7day.png");
        }
        .icon-15day {
          @include bgImg(20px, 20px, "/imgs/icon-15day.png");
        }
        .icon-post {
          @include bgImg(20px, 20px, "/imgs/icon-post.png");
        }
      }
    }
  }
}

// ......................................
.site-footer {
  width: 100%;
  display: block;

  .container {
    width: 1226px;
    height: 192px;
    display: flex;

    .footer-links {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 40px 0;
      box-sizing: border-box;

      .footer-links-dl {
        float: left;
        width: 160px;
        height: 112px;
        margin: 0;
        &:last-child {
          border-right: 1px solid #ccc;
        }
        dt {
          margin: -1px 0 26px;
          font-size: 14px;
          line-height: 1.25;
          color: #424242;
          cursor: pointer;
        }
        dd {
          color: #757575;
          font-size: 12px;
          cursor: pointer;
          display: block;
          margin-inline-start: 40px;
          margin: 10px 0 0;
        }
      }
    }
    .footer-contact {
      float: right;
      width: 251px;
      border-left: 1px solid #e0e0e0;
      text-align: center;
      color: #616161;
      padding: 40px 0;
      box-sizing: border-box;
      .phone {
        font-size: 22px;
        color: #ff6700;
        display: block;
      }
      p {
        display: block;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
      }
      .follow {
        display: block;
        border: 1px solid #f60;
        width: 118px;
        height: 28px;
        font-size: 12px;
        line-height: 28px;
        text-align: center;
        margin: 0 auto;
        color: #f60;
        &:hover {
          background: #f60;
          color: #fff;
        }
      }
    }
  }
}
//.......................................
.site-info {
  padding: 30px 0;
  font-size: 12px;
  background: #fafafa;
  .container {
    display: flex;
    flex-wrap: wrap;
    .logo-footer {
      display: inline-block;
      width: 70px;
      height: 55px;

      &:before {
        content: "";
        display: inline-block;
        width: 55px;
        height: 55px;
        background: url("/imgs/logo-footer.png") no-repeat center;
        background-size: 55px;
        transition: margin 0.2s;
      }
    }
    .info-text {
      width: 1149px;

      p {
        a {
          display: inline-block;
          color: #757575;
          line-height: 20px;
        }
        &:last-child {
          color: #b0b0b0;
          a {
            color: #b0b0b0;
          }
        }
      }
    }
    //...............
    .info-links {
      width: 1226px;

      a {
        width: auto;
        height: 28px;
      }
      img {
        width: auto;
        height: 28px;
      }
    }
  }
  .slogan {
    margin: 30px auto 0;
    width: 100%;
    height: 19px;
    text-align: center;
    color: #b0b0b0;
    font-size: 20px;
  }
}
</style>
